<template>
	<div id="KeyWodrs">
		<div v-show="isHaveData" id="CiYunTu03"></div>
		<p v-show="!isHaveData" class="empty">
			<i class="iconfont icon-queshengye_zanwushuju"></i>
			<span>暂无命中</span>
		</p>
	</div>
</template>

<script setup>
import {onMounted} from 'vue'
import {WordCloud} from '@antv/g2plot'

const props = defineProps({
	keywords: String
})

const isHaveData = ref(false)

const processKeywords = (text) => {
	if (!text) return []
	const words = text.split(/[、,，\s]+/).filter(Boolean)
	const wordMap = new Map()
	words.forEach(word => {
		const trimmed = word.trim()
		if (trimmed) {
			wordMap.set(trimmed, (wordMap.get(trimmed) || 0) + 1)
		}
	})
	return Array.from(wordMap.entries()).map(([keyword, level], id) => ({
		id,
		keyword,
		level
	}))
}
onMounted(() => {
	const wordsList = processKeywords(props.keywords)
	isHaveData.value = wordsList.length > 0
	const wordCloud = new WordCloud('CiYunTu03', {
		data: wordsList,
		wordField: 'keyword',
		weightField: 'level',
		colorField: 'keyword',
		wordStyle: {
			fontFamily: 'Verdana',
			fontSize: [8, 32],
			rotation: 0.5
		},
		// 返回值设置成一个 [0, 1) 区间内的值，
		// 可以让每次渲染的位置相同（前提是每次的宽高一致）。
		random: () => 0.1
	})
	wordCloud.render()
})
</script>
<style lang="less" scoped>
#KeyWodrs {
	width: 100%;
	height: 100%;

	#CiYunTu03 {
		width: 100%;
		height: 80%;
		overflow: hidden;
	}

	.empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.icon-queshengye_zanwushuju {
			font-size: 32px;
		}

		span {
			font-size: 10px;
			color: #999;
		}
	}
}
</style>
